<template>
  <div class="bute">
    <GongYong class="header"></GongYong>
    <main>
      <div class="brey">
        <div class="input_ret">
          <div class="input_err">
            <p>状态</p>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="input">
            <!-- 搜索 -->
            <p>名称</p>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="info" plain icon="el-icon-search" @click="kwywor"></el-button>
          </div>
        </div>
        <!-- 添加 -->
        <el-button type="primary" @click="addList()">新增产品分类</el-button>
        <!-- 添加 -->
        <el-dialog title="创建商品分类" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" placeholder="数码产品"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="父级" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="每日新品">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="分类图标(180)" :label-width="formLabelWidth">
              <i class="el-icon-camera"></i>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="排序" :label-width="formLabelWidth">
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-switch v-model="value3" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%"
        >
          <el-table-column type="expand" style="width: 100%">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.word }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.word }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="title" show-overflow-tooltip></el-table-column>
          <el-table-column label="类型" prop="word" show-overflow-tooltip></el-table-column>
          <el-table-column label="分类图标" show-overflow-tooltip>
            <template slot-scope="scope">
              <img style="height: 50px" :src="scope.row.img" alt />
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="price" show-overflow-tooltip></el-table-column>
          <el-table-column label="状态" prop="word" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope" show-overflow-tooltip>
              <el-button @click="burt()" type="text" size="small">添加子目录</el-button>

              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >编辑</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
         <el-dialog title="收货地址" :visible.sync="dialogForm">
                <el-form :model="form">
                  <el-form-item label="规格名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商品规格" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="商品属性" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogForm = false">取 消</el-button>
                  <el-button type="primary" @click="editadd()">确 定</el-button>
                </div>
              </el-dialog>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import GongYong from "./gongyong.vue";
export default {
  name: "Bret",
  components: {
    GongYong,
  },
  data() {
    return {
      activeName: "first",
      value3: true,
      num: 1,
      options: [],
      value: "",
      input: "",
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 5, //每页数据

      dialogForm: false,
      form: {
        name: "",
        price: "",
        title: "",
        word: "",
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      form: {
        name: "",
        price: "",
        title: "",
        word: "",
      },
      formLabelWidth: "120px",
      options: [
        {
          value: "选项1",
          label: "新的选择",
        },
      ],
    };
  },
  created() {
    axios.get("getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },
  methods: {
    handleClick(tab, event) {
      // this.$router.push(`/chaxun${}`)
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //编辑
    edit(row) {
      this.dialogForm = true;
      Object.assign(this.form, { ...row });
    },
    editadd() {
      axios
        .put("editList", { ...this.form })
        .then((res) => {
          this.dialogForm = false;
          this.$router.go(0);
        });
    },
    //搜索
    kwywor() {
      axios
        .get(`getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    //添加
    addList() {
      this.dialogFormVisible = true;
    },
    handleChange(value) {
      console.log(value);
    },
    burt(){
      console.log()
    },
    deletae(id) {
      axios.delete(`delete/${id}`).then((res) => {
        this.$router.go("0");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bute {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
}

main {
  flex: 1;
  background: #fff;
  padding: 0 10px;
}
.input_ret {
  width: 100%;
  display: flex;
  padding: 10px 20px;

  p {
    width: 50px;
  }
}
.input {
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.el-button {
  margin: 5px 0;
}

.el-pagination {
  width: 80%;
  text-align: center;
  padding: 20px;
}
span {
  padding: 0 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-input {
  flex: 1;
}
.el-select {
  width: 100%;
}
.el-icon-camera {
  font-size: 18px;
  padding: 10px;
  background: #efefef;
}
.input_err {
  display: flex;
  align-items: center;
}
.el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ccc;
}
.dialog-footer {
  text-align: left;
}
</style>